<template>
  <div class="tab-control">
    <ul>
      <li :class="index === currentIndex ? 'active' : ''" v-for="(item, index) in title" :key="index" @click="itemClick(index)">{{item}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  props:{
    title: {
      type: Array,
      default: () => []
    }
  },
  data(){
    return {
      currentIndex: 0
    }
  },
  methods:{
    itemClick(index){
      this.currentIndex = index;
      this.$emit('tabClick', index)
    }
  }
}
</script>
<style lang="less" scoped>
.tab-control{
  height: 45px;
  line-height: 45px;
  text-align: center;
  background-color: #fff;
  ul{
      display: flex;
      li{
        flex: 1;
        position: relative;
        &::after{
          position: absolute;
          bottom: 5px;
          right: 0;
          left: 0;
          display: block;
          content: '';
          height: 3px;
          width: 0;
          background-color: pink;
          margin: auto;
        }
        &.active::after{
          width: 35%;
        }
      }
      li.active{
        color: pink;
      }
  }
}
</style>